<template>
	<view class="">
		<u-navbar :title="title"></u-navbar>
		<view class="u-p-30">
			<view class="u-m-b-35" v-for="(item,idx) in commentList" :key="idx" style="position: relative;">
				<view class="u-flex u-m-b-15">
					<view class="avatar">
						<image style="width: 56rpx;" src="../../../static/class/menu/steward.png" mode="widthFix"></image>
					</view>
					<view class="u-flex-1 u-flex u-row-between u-p-l-20">
						<view class="">
							<view class="u-font-24" style="color: #262626;">{{item.userName}}</view>
							<view class="u-font-24" style="color: #595959;">{{item.commentTime}}</view>
						</view>
						<!-- reply -->
						<view class="u-flex">
							<image style="width: 36rpx;" src="../../../static/course/edit@2x.png" mode="widthFix"></image>
							<view class="u-m-l-8 u-font-24" style="color: #BFBFBF;" @click="reapply(item.commentId)">回复</view>
						</view>
					</view>
				</view>
				<view class="u-m-b-15">{{item.content}}</view>
				<view class="u-line-3" style="background: #F5F5F5;padding: 25rpx 40rpx;" v-for="(item2,idx2) in item.children" :key="idx2">
					<text class="" style="color: #262626;">{{item2.userName}}：</text>{{item2.content}}
				</view>
			</view>
		</view>
		<u-popup v-model="showComment" mode="center" closeable width="600rpx" height="400rpx">
				<view style="padding: 30rpx;">
					<view>{{commentTitle}}</view>
					<view style="padding-left: 0rpx;">
						
						<u-field
									v-model="commentContent"
									label="评论内容:"
									placeholder="请输入评论"
								>
								</u-field>
					</view>
					
					<u-button shape="square" style="margin-top:60rpx" @click="submitComment()">提交</u-button>
				</view>
			</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				commentList:[],
				courseId:'',
				commentType:'',
				commentContent:'',
				commentTitle:'',
				title:'更多评论',
				showComment:false,
			}
		},
		onLoad(option) {
			console.log(option)
			this.courseId = option.id
			
			if(option.type == 1){
				this.title= '我的评论'
				this.initMyCommentList()
			}else{
				this.initCommentList()
			}
		},
		methods:{
			initCommentList(){
				this.$util.request('app/classroom/v1/getAllCommentList/'+this.courseId,'get',{},false).then(res=>{
					console.log(res)
					this.commentList = res.data
				})
			},
			initMyCommentList(){
				this.$util.request('app/classroom/v1/getMyComment','get',{},false).then(res=>{
					console.log(res)
					this.commentList = res.data
				})
			},
			reapply(data){
				this.showComment = true
				this.commentType=data;
				this.commentTitle= '回复评论'
			},
			submitComment(){
				console.log(1)
				let obj = Object.assign({});
				if(this.commentType == 1){
					obj.lessonId= this.courseId
				}else{
					obj.commentId = this.commentType
				}
				obj.content = this.commentContent
				this.$util.request('app/classroom/v1/createComment','post',obj,false).then(res=>{
						console.log(res)
						this.commentContent = ''
						uni.showToast({
							title:'评论成功',
							icon:'none'
						})
						this.showComment=false
						this.initCommentList()
				})
			},
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}
</style>
